<template>
    <div>
        <div class="tabNav">
            <router-link to="/index">
                <img src="../assets/img/sidebar1.png" />首页
            </router-link>
            <b>/<img style="top: 1px" src="../assets/img/icon_fapiao.png" />发票信息</b>
            <el-input
                placeholder="请输入发票编码/代码进行搜索"
                suffix-icon="el-icon-search"
                @change="searchMethods"
                v-model="searchValue">
            </el-input>
            <em v-if="Object.keys(invoiceCountObj).length > 0">
				<i style="font-size: 16px;margin-right: 5px;" class="el-icon-s-data"></i>
				<span>发票总数量：{{ invoiceCountObj.invoiceAllNum }}</span>
				<span style="margin-left: 10px;">其中灵工平台对企业的数量：{{ invoiceCountObj.specialInvoiceNum }}</span>
				<span style="margin-left: 10px;">个体户对灵工平台的数量：{{ invoiceCountObj.generalInvoiceNum }}</span>
			</em>
        </div>
        <el-row :gutter="24">
			<el-col :span="24">
				<el-card class="cardTits cardTitss cardTitee cardTitcc cardTitpp" shadow="hover" style="margin-bottom: 0">
					<div v-if='addInvoiceSelect' class="addInvoice" @click="addInvoice">新增发票</div>
                    <el-tabs class="tab-personal" v-model="activeName" @tab-click="handleClick">
						<el-tab-pane label="灵工平台对企业" name="first">
							<invoice-table ref="searchMethods1" :search="searchValue" :invoiceType="1"></invoice-table>
						</el-tab-pane>
						<el-tab-pane label="个体户对灵工平台" :lazy="true" name="second">
							<invoice-table ref="searchMethods2" :search="searchValue" :invoiceType="2"></invoice-table>
						</el-tab-pane>
					</el-tabs>
				</el-card>
                <!-- 新增发票 -->
                <el-dialog title="选择个体商户" custom-class="examine-style" v-model="addInvoiceShow" width="80%">
                    <div class="cardTits">
                        <el-table :data="tableData1" stripe style="width: 100%" @sort-change="sortChange">
                            <!-- <el-table-column type="selection" width="45">
                            </el-table-column> -->
                            <el-table-column prop="id" sortable="custom" label="ID" width="75">
                            </el-table-column>
                            <el-table-column prop="selfBusinessName" sortable="custom" label="企业名称">
                            </el-table-column>
                            <el-table-column prop="legalName" sortable="custom" label="法人">
                            </el-table-column>
                            <el-table-column prop="socialCreditCode" sortable="custom" label="统一社会信用代码">
                            </el-table-column>
                            <el-table-column prop="platformName" sortable="custom" label="用工平台">
                            </el-table-column>
                            <el-table-column prop="caozuo" label="操作" width="130" class-name="editor">
                                <template #default="item">
                                    <el-button @click="getVocationalWorkShow(item.row.id)" type="text">添加关联业务</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
                            :current-page="currentPage" :page-sizes="arrPage" :page-size="selectPage"
                            layout="total, sizes, prev, pager, next, jumper" :total="total">
                        </el-pagination>
                    </div>
                </el-dialog>
                <!-- 关联业务 -->
                <el-dialog
                    title="关联业务"
                    custom-class="examine-style"
                    v-model="vocationalWorkShow"
                    width="60%"
                >
                    <div class="cardTits">
                    <el-table :data="TaskLists" ref="multipleTable" @selectionChange="modifyTask" stripe style="width: 100%" @sort-change="sortChange1">
                        <el-table-column type="selection" width="45"> </el-table-column>
                        <el-table-column prop="name" sortable="custom" label="任务名称">
                        </el-table-column>
                        <el-table-column prop="businessName" sortable="custom" label="发布企业">
                        </el-table-column>
                        <el-table-column prop="platformName" sortable="custom" label="用工平台">
                        </el-table-column>
                        <el-table-column prop="taskPayment" sortable="custom" label="实际服务款">
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        v-if="TaskLists.length > 0"
                        @size-change="handleSizeChangeCo"
                        @current-change="handleCurrentChangeCo"
                        :current-page="currentPage1"
                        :page-sizes="arrPage"
                        :page-size="selectPage1"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total1"
                    >
                    </el-pagination>
                    </div>
                    <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="vocationalWorkShow = false">取 消</el-button>
                        <el-button type="primary" @click="getCreatGeneralInvoice"
                        >添 加</el-button
                        >
                    </span>
                    </template>
                </el-dialog>
			</el-col>
		</el-row>
            
    </div>
</template>

<script>
import InvoiceTable from '../components/table/InvoiceTable.vue'
export default {
    name: "dashboard",
    data() {
        return {
            orderByZH: false,
            orderByAsc: false,
            orderByColume: 'createTime',
            activeName: 'first',
            addInvoiceShow: false,
            addInvoiceSelect: false,
            vocationalWorkShow: false,
            name: localStorage.getItem("ms_username"),
            searchValue: '', // 混合搜素查询
			invoiceCountObj: {}, // 发票数量
			tableData: [],
            tableData1: [],
            modifyTasks: [],
            billdwonload: [],
            TaskLists: [],
            selfBusinessId: '',
			currentPage: 1,
			total: 0, // 总条数
			arrPage: [10, 20], // 每页条数
			selectPage: 10, // 每页选中条数
            currentPage1: 1,
            selectPage1: 10,
            total1: 0
        };
    },
    components: {
		InvoiceTable
    },
    computed: {
        role() {
            return this.name === "admin" ? "超级管理员" : "普通用户";
        }
    },
    mounted() {
		this.invoiceCount()
	},
    methods: {
        searchMethods() {
            // 搜索
            if(this.activeName == 'first') {
                this.$refs.searchMethods1.getTableData()
            }else {
                this.$refs.searchMethods2.getTableData()
            }
		},
        handleClick(tab) {
            if(tab.index == 1) {
                this.addInvoiceSelect = true
            }else {
                this.addInvoiceSelect = false
            }
        },
        addInvoice() {
            // 新增发票
            this.addInvoiceShow = true
            this.$http({
				url: '/api/invoice/queryUnBilledSelfSevicers',
				method: 'post',
				headers: {
					'Content-Type': 'application/json'
				},
                data: {
                    pageNum: this.currentPage,
                    pageSize: this.selectPage,
                    orderByAsc: this.orderByAsc, // 是否正序
                    orderByColume: this.orderByColume, // 排序字段
                    orderByZH: this.orderByZH, // 是否汉字
                },
			}).then(data => {
				if(data.code === 0) {
					this.tableData1 = data.result.list
                    this.total = data.result.total;
				}
			})
        },
        // 修改关联业务
        modifyTask(d) {
            this.billdwonload = d;
        },
        getVocationalWorkShow(id){
        // 修改关联业务
            this.selfBusinessId = id;
            this.vocationalWorkShow = true,
            this.addInvoiceShow = false,
            this.$http({
                url: "/api/invoice/queryUnBilledTaskLists",
                method: "post",
                headers: {
                "Content-Type": "application/json",
                },
                data: {
                    pageNum: this.currentPage1,
                    pageSize: this.selectPage1,
                    selfBusinessId: id,
                    orderByAsc: this.orderByAsc, // 是否正序
                    orderByColume: this.orderByColume, // 排序字段
                    orderByZH: this.orderByZH, // 是否汉字
                },
            }).then((data) => {
                if (data.code === 0) {
                    this.TaskLists = data.result.result.list
                    this.total1 = data.result.result.total;
                }
            });
        },
        getCreatGeneralInvoice(){
            let billNo = [];
            for (let i = 0; i < this.billdwonload.length; i++) {
                billNo.push(this.billdwonload[i].id);
            }
            if(this.billdwonload.length == 0){
                this.$message.error("请选择任务")
            }else{
                this.$http({
                    url: "/api/invoice/creatGeneralInvoice",
                    method: "post",
                    headers: {
                    "Content-Type": "application/json",
                    },
                    data: {
                        taskIds: billNo,
                        selfBusinessId: this.selfBusinessId,
                        orderByAsc: this.orderByAsc, // 是否正序
                        orderByColume: this.orderByColume, // 排序字段
                        orderByZH: this.orderByZH, // 是否汉字
                    },
                }).then((data) => {
                    if (data.code === 0) {
                        this.vocationalWorkShow = false
                        this.$message.success("添加成功")
                        this.$refs.searchMethods2.getTableData()
                    }
                });
            }
        // 添加关联业务
            
        
        },
		invoiceCount() {
			// 获取发票数量
			this.$http({
				url: '/api/invoice/selectInvoiceCount',
				method: 'post',
				headers: {
					'Content-Type': 'application/json'
				}
			}).then(data => {
				if(data.code === 0) {
					this.invoiceCountObj = data.result
				}
			})
		},
        sortChange(d) {
            // 监听排序
            if(d.prop == null) {
                // 默认排序方式
                this.orderByZH = false
                this.orderByAsc = false
                this.orderByColume = 'createTime'
            }else {
                let orderByZH = false
                if(d.prop == "businessName" || d.prop == "industyMsg" || d.prop == "platformName" || d.prop == "name") {
                orderByZH = true
                }
                this.currentPage = 1
                this.selectPage = 10
                let orderByAsc = d.order == "descending" ? false : true
                this.orderByZH = orderByZH
                this.orderByAsc = orderByAsc
                this.orderByColume = d.prop
            }
            this.addInvoice();
        },
        sortChange1(d) {
            // 监听排序
            if(d.prop == null) {
                // 默认排序方式
                this.orderByZH = false
                this.orderByAsc = false
                this.orderByColume = 'createTime'
            }else {
                let orderByZH = false
                if(d.prop == "businessName" || d.prop == "industyMsg" || d.prop == "platformName" || d.prop == "name") {
                orderByZH = true
                }
                this.currentPage = 1
                this.selectPage = 10
                let orderByAsc = d.order == "descending" ? false : true
                this.orderByZH = orderByZH
                this.orderByAsc = orderByAsc
                this.orderByColume = d.prop
            }
            this.getVocationalWorkShow();
        },
		handleSizeChange(val) {
			// 切换每页条数调用
			this.selectPage = val
			this.getPersonalData()
		},
		handleCurrentChange(val) {
			// 切换当前页数调用
			this.currentPage = val
			this.getPersonalData()
		},
        handleSizeChange1(val) {
			// 切换每页条数调用
			this.selectPage = val
			this.addInvoice()
		},
		handleCurrentChange1(val) {
			// 切换当前页数调用
			this.currentPage = val
			this.addInvoice()
		},
		handleSelectionChange() {
			
		},
        handleCurrentChangeCo(val) {
			// 切换当前页数调用
			this.currentPage1 = val
			this.getVocationalWorkShow(this.selfBusinessId)
		},
        handleSizeChangeCo(val) {
			// 切换每页条数调用
			this.selectPage1 = val
			this.getVocationalWorkShow(this.selfBusinessId)
		},
    }
};
</script>
<style lang="scss" scoped>
	.tab-personal {
		background-color: #FFFFFF;
		:deep(.el-tabs__header)  {
			margin-bottom: 10px;
			padding: 8px 20px 0;
		}
		:deep(.el-tabs__item) {
			color: #0A2E6A;
			font-weight: normal;
		}
		:deep(.el-tabs__item.is-active) {
			color: #326CF0;
			font-weight: 500;
		}
		:deep(.el-tabs__nav-wrap::after) {
			background-color: #FFFFFF;
		}
		:deep(.el-tabs__active-bar) {
			background-color: #326CF0;
			height: 4px;
			border-radius: 2px;
		}
	}
    .addInvoice {
        position: absolute;
        right: 30px;
        top: 14px;
        color: #fff;
        background: #326CF0;
        padding: 8px 15px;
        font-size: 12px;
        border-radius: 5px;
        cursor: pointer;
        z-index: 111;
    }
</style>
<style>
    .cardTitpp .el-card {
        padding-bottom: 5px;
    }
</style>
